<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/government/subsidy' }"
      >补贴资金管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div class="obj_item">计划名称：{{ dataObj.name }}</div>
          <div class="obj_item">
            状态：{{
              dataObj.status
                ? options3.find((item) => dataObj.status === item.value).label
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            补贴类型：{{
              options2.find((item) => item.value === dataObj.type).label
            }}
          </div>
          <div class="obj_item">
            申请截止时间：{{ dataObj.endTime ? dataObj.endTime : "-" }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">备注：<span v-html="dataObj.content" /></div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            <span style="margin-bottom: 12px; display: inline-block">
              附件：</span>
            <el-upload
              style="position: relative; min-height: 148px"
              action="/api/system/upload"
              list-type="picture-card"
              :auto-upload="true"
              :file-list="fileListShow"
              :disabled="true"
            >
              <i slot="default" class="el-icon-plus" />
              <div slot="file" slot-scope="{ file }">
                <img
                  style="height: 148px"
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <div
                  class="text"
                  style="
                    display: block;
                    max-width: 148px;
                    word-break: break-all;
                  "
                >
                  {{ file.name ? file.name : "" }}
                </div>
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
      </div>
      <div v-if="dataObj.status" style="width: 100%; margin-top: 40px">
        <div class="obj_title">园所提交信息</div>
        <div class="obj_box">
          <div class="obj_item">
            机构名称：{{
              dataObj.govApplyForInstitution.institutionName
                ? dataObj.govApplyForInstitution.institutionName
                : "-"
            }}
          </div>
          <div class="obj_item">
            机构地址：{{
              dataObj.govApplyForInstitution.institutionAddress
                ? dataObj.govApplyForInstitution.institutionAddress
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            负责人：{{
              dataObj.govApplyForInstitution.responsiblePerson
                ? dataObj.govApplyForInstitution.responsiblePerson
                : "-"
            }}
          </div>
          <div class="obj_item">
            联系方式：{{
              dataObj.govApplyForInstitution.contactInfo
                ? dataObj.govApplyForInstitution.contactInfo
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            机构类型：{{
              dataObj.govApplyForInstitution.institutionType
                ? options.find(
                  (item) =>
                    item.value ===
                    dataObj.govApplyForInstitution.institutionType
                ).label
                : "-"
            }}
          </div>
          <div class="obj_item">
            机构性质：{{
              dataObj.govApplyForInstitution.institutionNature
                ? options1.find(
                  (item) =>
                    item.value ===
                    dataObj.govApplyForInstitution.institutionNature
                ).label
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            核定托位数（个）：{{
              dataObj.govApplyForInstitution.approvedCapacity
                ? dataObj.govApplyForInstitution.approvedCapacity
                : "-"
            }}
          </div>
          <div class="obj_item">
            登记注册机关：{{
              dataObj.govApplyForInstitution.registrationAuthority
                ? dataObj.govApplyForInstitution.registrationAuthority
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            备案机关：{{
              dataObj.govApplyForInstitution.filingAuthority
                ? dataObj.govApplyForInstitution.filingAuthority
                : "-"
            }}
          </div>
          <div class="obj_item">
            开户行：{{
              dataObj.govApplyForInstitution.bankName
                ? dataObj.govApplyForInstitution.bankName
                : "-"
            }}
          </div>
        </div>
        <div class="obj_box">
          <div class="obj_item">
            银行卡号：{{
              dataObj.govApplyForInstitution.bankCardNumber
                ? dataObj.govApplyForInstitution.bankCardNumber
                : "-"
            }}
          </div>
        </div>
      </div>
      <div v-if="dataObj.status" style="width: 100%; margin-top: 40px">
        <div class="obj_title">拨款信息</div>
        <div class="obj_box">
          <!-- <div class="obj_item">机构名称：{{ dataObj.name1 }}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { govCapitalSubsidyProjectDetails } from './api'
import { mapGetters } from 'vuex'
import fileImage from '@/assets/file_image.png'
export default {
  data () {
    return {
      textarea: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      dataObj: {},
      options: [
        {
          value: '1',
          label: '托育中心'
        },
        {
          value: '2',
          label: '用人单位托育点'
        },
        {
          value: '3',
          label: '幼儿园'
        },
        {
          value: '4',
          label: '托育综合服务中心'
        }
      ],
      options3: [
        {
          value: 0,
          label: '草稿'
        },
        {
          value: 1,
          label: '已上线'
        },
        {
          value: 2,
          label: '已下线'
        },
        {
          value: 3,
          label: '已过期'
        }
      ],
      options1: [
        {
          value: '1',
          label: '公办'
        },
        {
          value: '2',
          label: '民办'
        },
        {
          value: '3',
          label: '公办民营'
        }
      ],
      options2: [
        {
          value: 0,
          label: '建设补贴计划'
        },
        {
          value: 1,
          label: '运营补贴计划'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleGovCapitalSubsidyProjectDetails()
  },
  mounted () {},
  methods: {
    async handleGovCapitalSubsidyProjectDetails () {
      const res = await govCapitalSubsidyProjectDetails({
        id: this.idS,
        areaId: this.curArea.id
      })
      this.dataObj = res
      this.dataObj.file = JSON.parse(res.file)
      this.fileListShow = this.dataObj.file.map((item, index) => {
        let fileExtension = item.url.split('.').pop() // 获取文件后缀
        fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
        if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
          return {
            uid: index,
            name: item.name,
            url: item.url,
            unloadUrl: item.url
          }
        } else {
          return {
            uid: index,
            name: item.name,
            url: fileImage,
            unloadUrl: item.url
          }
        }
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.unloadUrl, '_blank')
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
  display: none !important;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 50px;
  padding-right: 400px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
